<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title> Your Profile </title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>

<div id="header">
    <div id="logo"><a href="main.html"><img src="img/logo.png"/></a></div>
    <div id="log_out"><a href="php/logout.php"><img width=60 src="img/logout.png"/></a></div>
    <div class="nav" id="create_group"><a href="create_group.html">Create group</a></div>
    <div class="nav" id="join_group"><a href="join_group.html">Join<br/>group</a></div>
    <div id="user"><a href="profile.html"><img width=60 src="img/profile.png"/></a></div>
    <div id="user-info"></div>
    <script>
        $.post('php/user-info.php', function(info){
            $('#user-info').text(info);
        })
    </script>
</div>

<body>
    <div id="user_info">
        <script>
        $('#user_info').load('php/user_info.php');
        </script>
    </div>

        <div id="view_status_message">
            <script>
                $('#view_status_message').load('php/user_status_message.php');
            </script>
        </div>

        <div id="write_status_message">

            <!-- Invite user to set a status message -->

            <h3>Enter or edit your status message</h3>
            <textarea id='textbox_message' cols='50' rows='5'></textarea><br />
            <input type='button' id='button_save' value='Save message' />

            <script>

                $('#button_save').click(function() {

                    var newStatus = $('#textbox_message').val();

                    $.ajax({
                        type: "POST",
                        url: "php/user_status_message.php",
                        data: 'status_message=' + newStatus,
                        success: function(msg) {
                            $('#textbox_message').val(msg);
                            $('#view_status_message').fadeOut(50)
                            .load('php/user_status_message.php')
                            .fadeIn("fast");
                        },
                        error: function(msg) {
                            $('feedback').text(msg);
                        }
                    })
                });
            </script>
        </div>

        <div id="feedback">
        </div>
</body>
</html>